<template>
  <div class="pages" ref="contentScroll">
    <div class="scroll">
      <el-timeline>
        <el-timeline-item timestamp="第一步" placement="top" size="large" color="#C6E2FF">
          <el-card>
            <template #header>
              <span>编辑坐标系</span>
            </template>
            <el-form label-position="left" label-width="60px">
              <el-form-item label="Y坐标">
                <div style="display: flex; align-items: center;">
                  <el-input-number v-model="store.coordinates.y" :min="1" :max="store.coordinates.max" @input="handleChangeY"></el-input-number>
                </div>
              </el-form-item>
              <el-form-item label="X坐标">
                <div style="display: flex; align-items: center;">
                  <el-input-number v-model="store.coordinates.x" :min="1" :max="store.coordinates.max" @change="handleChangeX"></el-input-number>
                </div>
              </el-form-item>
            </el-form>
          </el-card>
        </el-timeline-item>

        <el-timeline-item timestamp="第二步" placement="top" size="large" color="#C6E2FF">
          <el-card>
            <template #header>
              <span>选择座位区域(框选或点选)</span>
            </template>
            <el-row>
              <el-col :span="24">
                <div class="seatButton" @click="markSeats('clear')">
                  <p class="seatText">撤销选中</p>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-timeline-item>

        <el-timeline-item timestamp="第三步" placement="top" size="large" color="#C6E2FF">
          <el-card>
            <template #header>
              <span>选择座位类型</span>
            </template>
            <el-row v-for="(type, index) in store.seatTypes" :key="type.id" :style="{marginTop: index > 0 ? '20px' : '0'}">
              <el-col :span="11">
                <el-button class="seatButton" @click="markSeats(type.id)">
                  {{type.name}}
                  <img v-if="type.icon" class="seat-demo" :src="require(`../assets/images/${type.icon}`)" />
                </el-button>
              </el-col>
              <el-col :span="2">&nbsp;</el-col>
              <el-col :span="11">
                <div class="seatButton-controls">
                  <el-button size="small" type="primary" :icon="Edit" circle @click="handleEditType(type)"></el-button>
                  <el-button size="small" type="danger" v-if="index > 0"  :icon="Delete"  circle @click="handleDeleteType(type.id)"></el-button>
                </div>
              </el-col>
            </el-row>
            <el-row style="margin-top:20px">
              <el-col :span="24">
                <div class="seatButton" @click="store.dialogs.showAddTypeDialog = true">
                  <p class="seatText">添加类型</p>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-timeline-item>

        <el-timeline-item timestamp="第四步" placement="top" size="large" color="#C6E2FF">
          <el-card>
            <template #header>
              <span>填写要保存模版名称</span>
            </template>
            <el-row>
              <el-col :span="24">
                <el-input
                  type="text"
                  placeholder="请输入模版名称"
                  v-model="store.template.name"
                  clearable
                  maxlength="10"
                  show-word-limit
                  @change="handleChangeTempleteName"
                ></el-input>
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入备注信息"
                  v-model="store.template.remark"
                  maxlength="100"
                  show-word-limit
                  @change="handleChangeTempleteRemark"
                  style="margin-top: 10px;"
                ></el-input>
              </el-col>
            </el-row>
          </el-card>
        </el-timeline-item>

        <el-timeline-item timestamp="第五步" placement="top" size="large" color="#C6E2FF">
          <el-card>
            <el-row>
              <el-col :span="24">
                <el-popover placement="top" width="200" v-model:visible="store.visible2">
                  <template #default>
                    <p>确认不再修改吗？</p>
                    <div style="text-align: right; margin: 0">
                      <el-button size="small" text @click="store.visible2 = false">取消</el-button>
                      <el-button type="primary" size="small" @click="confirm">确定</el-button>
                    </div>
                  </template>
                  <template #reference>
                    <el-button :loading="store.confirmButtonLoading" size="small" round type="primary">确认完成</el-button>
                  </template>
                </el-popover>
              </el-col>
            </el-row>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>

    <el-dialog v-model="store.dialogs.showAddTypeDialog" title="座位类型管理" width="30%">
      <el-form :model="store.newSeatType" label-width="80px">
        <el-form-item label="类型ID">
          <el-input v-model="store.newSeatType.id" disabled placeholder="系统自动生成"></el-input>
        </el-form-item>
        <el-form-item label="类型名称">
          <el-input v-model="store.newSeatType.name" placeholder="请输入类型名称"></el-input>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="store.newSeatType.color" show-alpha></el-color-picker>
        </el-form-item>
        <el-form-item label="价格">
          <el-input-number v-model="store.newSeatType.price" :min="0" :precision="2" :step="1"></el-input-number>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="store.dialogs.showAddTypeDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleAddSeatType">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="store.dialogs.showEditTypeDialog" title="编辑座位类型" width="30%">
      <el-form :model="store.editingSeatType" label-width="80px">
        <el-form-item label="类型名称">
          <el-input v-model="store.editingSeatType.name" placeholder="请输入类型名称"></el-input>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="store.editingSeatType.color" show-alpha></el-color-picker>
        </el-form-item>
        <el-form-item label="价格">
          <el-input-number v-model="store.editingSeatType.price" :min="0" :precision="2" :step="1"></el-input-number>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="store.dialogs.showEditTypeDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleUpdateSeatType">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { store } from '../store/stroe';

// 坐标系相关方法
const handleChangeX = (value) => {
  store.value.coordinates.x = value;
};

const handleChangeY = (value) => {
  store.value.coordinates.y = value;
};

// 座位类型相关方法
const markSeats = (typeId) => {
  if (typeId === 'clear') {
    store.value.PixiComponent.clearAllHighlights();
    return;
  }
  const typeData = store.value.seatTypes.find(type => type.id === typeId);
  if (typeData && store.value.selectedCells.length > 0) {
    // 将选中的格子与座位类型信息整合
    const newSeats = store.value.selectedCells.map(cell => ({
      ...cell,
      ...typeData
    }));
    
    // 遍历新的座位，检查是否存在相同坐标的座位
    newSeats.forEach(newSeat => {
      const existingIndex = store.value.seatCells.findIndex(seat => 
        seat.x === newSeat.x && seat.y === newSeat.y
      );
      
      if (existingIndex !== -1) {
        // 如果存在相同坐标的座位，则覆盖它
        store.value.seatCells[existingIndex] = newSeat;
      } else {
        // 如果不存在相同坐标的座位，则添加新座位
        store.value.seatCells.push(newSeat);
      }
    });
    
    // 清空已选中的格子
    store.value.PixiComponent.clearAllHighlights();
    console.log(store.value.seatCells);
  }
};

const handleEditType = (type) => {
  console.log(type);
  store.value.editingSeatType = { ...type };
  store.value.dialogs.showEditTypeDialog = true;
};

const handleDeleteType = (typeId) => {
  // 检查是否有座位使用该类型
  const hasSeatsWithType = store.value.seatCells.some(seat => seat.id === typeId);
  if (hasSeatsWithType) {
    ElMessage.warning("该座位类型已被使用，无法删除");
    return;
  }
  store.value.seatTypes = store.value.seatTypes.filter(type => type.id !== typeId);
};

const handleAddSeatType = () => {
  const newType = { ...store.value.newSeatType, id: Date.now().toString() };
  store.value.seatTypes.push(newType);
  store.value.dialogs.showAddTypeDialog = false;
  // 重置表单
  store.value.newSeatType = {
    id: new Date().getTime().toString(),
    name: "",
    color: "",
    price: 0,
  };
};

const handleUpdateSeatType = () => {
  const index = store.value.seatTypes.findIndex(type => type.id === store.value.editingSeatType.id);
  if (index !== -1) {
    store.value.seatTypes[index] = { ...store.value.editingSeatType };
  }
  store.value.dialogs.showEditTypeDialog = false;
};

// 模板相关方法
const handleChangeTempleteName = (value) => {
  store.value.template.name = value;
};

const handleChangeTempleteRemark = (value) => {
  store.value.template.remark = value;
};


const confirm = () => {
  store.value.confirmButtonLoading = true;

  if (store.value.template.name === "") {
    ElMessage.error("模版名称不能为空");
    store.value.confirmButtonLoading = false;
    return;  
  }
  
  console.log(store.value.seatCells);
  let formData = {
    name: store.value.template.name,
    remark: store.value.template.remark,
    seatCells: store.value.seatCells, 
    seatTypes: store.value.seatTypes,
  }
  console.log(JSON.stringify(formData));
};

</script>

<style scoped>
.pages {
  width: 350px;
  box-sizing: border-box;
  padding: 30px 20px;
  overflow: hidden;
  overflow-y: auto;
  height: 100vh;
  position: relative;
}

.pages .scroll {
  padding-top: 15px;
}

.pages .scroll .seat-demo {
  width: 20px;
  height: 20px;
  vertical-align: -65%;
}

.pages .scroll .seatButton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 5px;
  cursor: pointer;
}

.pages .scroll .seatButton:hover {
  opacity: 0.8;
}

.pages .scroll .seatButton .seatText {
  text-align: center;
  width: 100%;
}

.pages .scroll .seatButton-controls {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>